<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    /*
    Promise 与 async/await 的关系和区别
1. 基本概念
Promise 是 JavaScript 中处理异步操作的一种方式，它代表一个异步操作的最终完成（或失败）及其结果值。
async/await 是基于 Promise 的语法糖，使异步代码看起来更像同步代码，提高代码可读性。
2. Promise 特点
三种状态：pending（待定）、fulfilled（已兑现）和 rejected（已拒绝）
状态一旦改变就不会再变
使用 .then() 和 .catch() 方法处理结果
可以链式调用
3. async/await 特点
async 函数总是返回一个 Promise
await 关键字只能在 async 函数内部使用
使异步代码看起来像同步代码，更容易理解和维护
错误处理使用 try/catch 语句
4. 示例对比
    */
    //定义一个Promise
    const Mypromise = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('Hello, Promise!');
      }, 1000);
    });
    //使用Promise
    Mypromise.then(resolve => {
      console.log(resolve); // 输出：Hello, World!
    }).then(() => {
      console.log('Promise resolved.');
      console.log('------------');
    }).catch(error => {
      console.error(error);
    });


    async function Myasync() {
      const result = await new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve('Hello, async/await!  ');
        }, 1000);
      });
      console.log(result); // 输出：Hello, World!
      console.log('Async function completed.');
    }
    Myasync();
    /*
    fetch('/api/data')
      .then(response => response.json())
      .then(data => {
        console.log(data);
      })
      .catch(error => {
        console.error('Error:', error);
      });
    
    .
      async function fetchData() {
      try {
        const response = await fetch('/api/data');
        const data = await response.json();
        console.log(data);
      } catch (error) {
        console.error('Error:', error);
      }
    }
    */

  </script>
</body>

</html>